<template>
  <div class="box loginBox">
    <div id="loginFrom">
      <div id="loginFrom-title">
        <h1>餐饮管理系统</h1>
      </div>
      <div id="loginFrom-from">

        <el-form :model="loginForm" status-icon :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
          <div class="login-input">
            <el-form-item prop="account">
              <el-input type="text" v-model="loginForm.account" autocomplete="off" maxlength="11" placeholder="username" clearable>
                <template #prepend>
                  <i class="el-icon-user"></i>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <div class="login-input">
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password" autocomplete="off" maxlength="20" placeholder="password" clearable show-password>
                <template #prepend>
                  <i class="el-icon-lock"></i>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <div class="login-submit">
            <el-button type="primary" class="submint-btn" @click="submitForm('ruleForm')">登录</el-button>
          </div>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
import router from '@/router';
export default {
    data() {
      //校验账号
      var validateAccount = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('账号不能为空'));
        } else {
          //判断输入的是不是正确的手机号格式
          if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
            callback(new Error('请输入正确的手机号'));
          }
          callback();
        }
      };
      //校验密码
      var validatePassword = (rule, value, callback) =>{
          if (/[\u4E00-\u9FA5]/g.test(value)) {
              callback(new Error('不能输入汉字'))
          } else if(value == ''){
              callback(new Error('密码不能为空'))
          }else{
              callback();
          }
      };

        return {
          //登录表单
          loginForm:{
            account: '18959868826',
            password: '123456',
            code: '',
          },
          //登录表单校验规则
          rules: {
            account: [
              { validator: validateAccount, trigger: 'blur' }
            ],
            password: [
              { validator: validatePassword, trigger: 'blur' }
            ],
          },
          //用户token
          tkkenStr: '',
        };
      },
    methods: {
      //登录方法
      submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.$axios.post("http://localhost:8888/hwy/cater/user/login",this.loginForm)
                 .then((response) => {
                    if(response.data.code === 1 ){
                      this.$message({
                        message: '登录成功。',
                        type: 'success',
                      });
                      window.localStorage.setItem("token",response.data.data.token);
                      window.localStorage.setItem("userInfo",JSON.stringify(response.data.data));
                      window.localStorage.setItem("id",response.data.data.id);
                      // initRoot(response.data.data.id).then((res) => {
                      //     console.log(res);
                      // });不知道为什么请求带不了Authorization
                      this.$axios.post("http://localhost:8888/hwy/cater/user/initRoot/"+response.data.data.id)
                        .then((res) =>{
                          // console.log(res)
                          this.$store.commit('setRoot',res.data.data.isRoot);
                          this.$store.commit('setRootStop',res.data.data.stop)
                        })
                      router.push("/home")
                    }else{
                      this.$message({
                        message: response.data.msg,
                        type: 'error'
                      });
                    }
                 })
                 .catch(function (error) { // 请求失败处理
                  console.log(error)
             });
          } else {
              this.$message({
                message: '登录失败，请输入正确格式。',
                type: 'error'
              });
            return false;
          }
        });
      },
    }
}
</script>

<style scoped>
@import "../assets/css/login.css";
</style>